Template Documentation v1.0
Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form in themeforest.net. Thanks so much!
This template has everything that you need to easy develop minimal and modern resume/portfolio:
Template has the following project structure:
All the html code are well documented for you to edit. Feel free to edit it to reach the result you want to get. Html-files use UTF-8 codepage. Use the editor with UTF-8 support to avoid problems with unreadable symbols.
<html lang="en" class="no-js"> Tags with metainformation are located inside <head> tag. Fill them to provide information about your website to search engines:
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" /> Also there is <title> tag is the title of your website.
<title>Website Name</title> <link> tags: These tags contains plugin.css, style.css, color.css see Css Structure for more information.
<body> tag contains the main website which users can view. It has following structure:
<body>
<div class="preloader">
<!--Website Preloader Area-->
</div>
<header>
<!--Website Navigation Area-->
</header>
<div id="main" class="pages-stack">
<!--Website Sections Area-->
</div>
</body> Header tag contain code for website navigation area. It has structure as follows:
<header>
<!--logo-->
<div class="logo"><a href="#">RS</a></div>
<div class="menu-button">
<!-- navigation button -->
</div>
<nav class="nav-menu">
<!-- navigation menu -->
</div>
</header> Logo is where which occurs on all pages of the website. We recommend putting your name initials in here.
This is the website navigation button. We suggest not to edit it otherwise website will not work properly.
This is the navigation menu for the website. Content as follow:
<nav class="nav-menu">
<div class="nav-menu--links">
<!-- Website Navigation Links -->
</div>
<div class="social-links">
<!-- social links -->
</div>
<div class="copy">
<!-- copyright text -->
</div>
</nav> nav-menu : This area contains the navigation links for the website its content is as follow:
<div class="nav-menu--links">
<a class="nav-menu--link" href="#home"><i class="fas fa-home"></i><span>Home</span></a>
<a class="nav-menu--link" href="#about"><i class="fas fa-user"></i><span>About</span></a>
<a class="nav-menu--link" href="#resume"><i class="fas fa-address-card"></i><span>Resume</span></a>
<a class="nav-menu--link" href="#portfolio"><i class="fas fa-briefcase"></i><span>Portfolio</span></a>
<a class="nav-menu--link" href="#blog"><i class="fas fa-book"></i><span>Blog</span></a>
<a class="nav-menu--link" href="#contact"><i class="fas fa-envelope"></i><span>Contact</span></a>
</div> The <a> tags have the href value which corresponds to the page section id attribute.It also have the class of value nav-menu--link, its important for the page transition to work. If you put href value other than section id it won't work and it should start with (#section-id-name). It also have the icon associated with the link to display.
social-links : This is where you put your social media icons and there respective links.
<a class="social-link" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="social-link" href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a class="social-link" href="#">
<i class="fab fa-linkedin-in"></i>
</a>
<a class="social-link" href="#">
<i class="fab fa-youtube"></i>
</a>copy : This is where you put the copyright text for the website.
<div class="copy">
<p>Copyright © 2018 {Website Name}, All rights Reserved.</p>
</div>This area contains the sections/pages of the website. Structure as follows:
<div id="main" class="pages-stack">
<section id="home">
<!--Section content-->
</section>
<section id="about">
<!--Section content-->
</section>
<section id="resume">
<!--Section content-->
</section>
<section id="portfolio">
<!--Section content-->
</section>
<section id="blog">
<!--Section content-->
</section>
<section id="contact">
<!--Section content-->
</section>
</div> The main div contain 6 sections corresponds to the links in the navigation.
This section contain the background image, name, and some animated text slideshow you want to show on the website home page.
This section contains the introduction, personal information, services, clients, and testimonial sections. View in html file its easy to understand.
This section contains your experience, education and skills you have.
<li class="event">
<h4>Lead UI Designer</h4>
<h5>
<span class="date">2017-2018</span>
<span class="company">Big Design Company, NY, USA<span>
</h5>
<p>Sit cupiditate praesentium ex esse nulla Facere fuga perspiciatis eveniet provident neque Ea ratione non minus temporibus ipsum Sunt minima.</p>
</li><div class="skill-item">
<h4 class="progress-title">Coral Draw</h4>
<div class="progress">
<div class="progress-bar" style="width:91%">
<div class="progress-value">91%</div>
</div>
</div>
</div>This section contains the portfolio's items. It has the following structure:
<div class="container">
<div class="page-heading">
<!--Page Heading-->
</div>
<div class="row">
<div class="col-md-12 portfolio-filter">
<!--Portfolio Filter-->
</div>
</div>
<div class="row portfolio-items">
<div class="item col-lg-4 col-sm-6 graphic">
<!--Portfolio Item-->
</div>
<!--Other Portfolio items-->
</div>
</div> Portfolio Section have two parts:
<ul>
<li class="active" data-filter="*">All</li>
<li data-filter=".brand">Brand</li>
<li data-filter=".design">Design</li>
<li data-filter=".graphic">Graphic</li>
</ul> Portfolio filters are the list item when clicked it will show portfolios related to those category.
data-filter : attribute specify the category the portfolios belongs to. It can have any value but thing to notice is that the
value starts with ".value".
<div class="item col-lg-4 col-sm-6 graphic brand">
<figure>
<img src="img/portfolio/img-2.jpg" alt="">
<figcaption>
<h3>Project Name</h3>
<p>Design</p>
<i class="fas fa-image"></i>
<a class="image-link" href="img/portfolio/img-2.jpg">View More</a>
</figcaption>
</figure>
</div> Portfolio item is contain inside <div> tag. It have class attribute which value are item and brand, item is used for styling the portfolio single item
and brand is used to show which category the item belongs to in respect to the filter.
Portfolio item has anchor tag. This tag has class and href attribute. The class attribute specify
that the link is of image type. There are 2 possible values:
This section contains the blog items. It has the following structure:
<div class="container">
<div class="page-heading">
<!--Section Heading-->
</div>
<div class="row blogs-container">
<div class="col-lg-4 col-sm-6">
<!--Blog Item-->
<a class="blog-item" href="single-blog.html">
<div class="post-img">
<!--Blog Image-->
</div>
<div class="post-content">
<!--Blog Content-->
</div>
</a>
</div>
</div>
</div> Blog item when click will open the link related to that blog item for example single-blog.html page.
This section contains contact form, contact information and google map.
Note : Edit this line in mail.php
$recipient = "example@example.com"; /*Change the email to your email id.*/
Contact Information : This contains you address, phone, email id.
Google Map : This contain the google map where you are located.
<div id="map" data-latitude="-37.817214" data-longitude="144.955925" data-zoom="15"></div> Enter the latitude and longitude of your location in here. Search google for more information
Note : For google map to work properly you have to get Google Map Api and enter in the html file. Visit This Link. And place as shown in below.
<script src="https://maps.googleapis.com/maps/api/js?key={YOUR-API-KEY}"></script> <---- Replace with your api keyplugins.css: This file contain the css library files which are located in plugins folder.
style.css: This file contain the layout style for the template.
(*-color.css): This files are for choosing highlighed color of you own choice. There are 6 color file in this template.
Note: If you want to edit you the style i recommend you your own css file and link to the template of you choice. Edit above files only if you know what you are doing.
jquery.min.js: This file is jquery library.
modernizr.js: This file is javascript library that detect html5 and css3 features in various browsers.
plugins.min.js: This file contains various js library used in this template.
main.js: This file is main javascript file for this template.
Note: Editing these files can cause unexpected behaviour to the template only edit these file if you know what you are doing.
This template uses
Images are not included. All images are replaced with the placeholder. Images used in this template can be find at:
Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting my profile on themeforest and message me with the form section.